{include "INC_header.html" title="分组和权限管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <main>
                <div class="sso-admin-groups">
                    <div class="group-item" v-for="group in list">
                        <div class="text-center">
                            <a-avatar class="justify-center auto-margin" :size="64">
                                <div class="justify-center"><i class="fa fa-users text-maximum"></i></div>
                            </a-avatar>
                        </div>
                        <div class="text-center text-bigger padding-top">{{ group.name }}</div>
                        <div class="text-center padding-top medium-text">已配置(<span class="danger-text">{{ group.users || 0 }}</span>)个账户，<a :href="'{url url='/sso/admin/user/list'}?groups=' + group.id">查看</a></div>
                        <div class="detail medium-text padding-top padding-bottom text-center">
                            {{ group.desc || '该分组没有任何说明' }}
                        </div>
                        <div class="ui row flex margin-top">
                            <div class="col">
                                <a class="ui button block margin-right" :href="'{url url='/sso/admin/user/group-edit'}?id=' + group.id">编辑权限</a>
                            </div>
                            <div class="col">
                                <a-popconfirm
                                        title="确定删除该分组？"
                                        ok-text="立即删除"
                                        cancel-text="取消"
                                        @confirm="delItem(group.id)">
                                    <div class="ui button block margin-left danger" :class="{ loading:delLoading  }">删除分组</div>
                                </a-popconfirm>
                            </div>
                        </div>
                    </div>
                    <div class="group-item group-button">
                        <a class="detail justify-center" href="{url url='/sso/admin/user/group-edit'}">
                            <a-avatar class="justify-center auto-margin" :size="64">
                                <div class="justify-center"><i class="fa fa-plus text-maximum'"></i></div>
                            </a-avatar>
                            <div class="text-center padding-top text-bigger">添加新分组</div>
                        </a>
                    </div>
                </div>
            </main>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                config: window.appProviderConfig,
                //数据
                list: [],
                //
                delLoading: false
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取列表数据
                this.getList();
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/sso/api/admin/group/list'}").then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            delItem: function (id) {
                this.delLoading = true;
                let self = this;
                axios.post("{url url='/sso/api/admin/group/delete'}", {
                    id
                }).then(({ data }) => {
                    self.delLoading = false;
                    if (data.error === 0) {
                        self.getList();
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.delLoading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent.length > 0) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"分组/权限" }
            ]
        });
    }
</script>
{include "INC_footer.html"}